<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>   
<%

icom.acm.demo.serverpush.User user = (icom.acm.demo.serverpush.User)session.getAttribute("user");
if (user==null) response.sendRedirect("demo.jsp");
System.out.println(user.getName()+"进入聊天室");
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
<script type="text/javascript" src="jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.20.custom.min.js"></script>

<!-- bootstrap -->
<script type="text/javascript" src="bootstrap/assets/js/jquery.js" ></script>
<link rel="stylesheet" type="text/css" href="bootstrap/assets/css/bootstrap.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap/assets/css/bootstrap-responsive.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap/assets/css/docs.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap/assets/js/google-code-prettify/prettify.css" charset="utf-8" />

<link rel="apple-touch-icon-precomposed" href="bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">

<script type="text/javascript" src="bootstrap/assets/js/bootstrap.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/bootstrap-popover.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/bootstrap-dropdown.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/bootstrap-scrollspy.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/bootstrap-button.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/bootstrap-carousel.js" ></script>
<script type="text/javascript" src="bootstrap/assets/js/google-code-prettify/prettify.js"></script>

<!-- bootstrap -->
<!-- DWR -->
<script type="text/javascript" src="dwr/engine.js"> </script>
<script type='text/javascript' src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/PushDWRManager.js"> </script>
<!-- DWR -->
<script type="text/javascript" src="Pub.js"></script>
<title>Chat</title>
  <style>
    input.itext { font-size: smaller; background: #E4E4E4; border: 0; }
    input.ibutton { font-size: xx-small; border: 1px outset; margin: 0px; padding: 0px; }
    span.reply { background: #ffffdd; white-space: pre; }
    span.content { font-size: 10; color: blue; }
  </style>
  
<script type="text/javascript">
var chatlog = "";
function init(){
	dwr.engine.setActiveReverseAjax(true);
}

function receive(message) {		
	var s = '<p class="well" align="left">\n';
		s += '<span class="reply">' + dwr.util.escapeHtml(message.user.name) + ':</span>\n';
		s += '<span class="content">'+ dwr.util.escapeHtml(message.content) +'</span>\n';
		s += '</p>\n';
	chatlog = chatlog + s; 
	
	/*
	for (var data in messages) {
		var s = '<p class="well" align="left">\n';
		s += '<span class="reply">' + dwr.util.escapeHtml(messages[data].user.name) + ':</span>\n';
		s += '<span class="content">'+ dwr.util.escapeHtml(messages[data].content) +'</span>\n';
		s += '</p>\n';
	  chatlog = s + chatlog;
	}*/	
	dwr.util.setValue("chat_content", chatlog, { escapeHtml:false });
}


function clkSend(){	
	PushDWRManager.send($('#msg').val(), reply);
}

function clkTest(){	
	PushDWRManager.getTest(reply);
}

var reply = function(data){
	if (data != null && typeof data == 'object') 
		alert(dwr.util.toDescriptiveString(data, 2));
//	else 
		//dwr.util.setValue('alert_msg', dwr.util.toDescriptiveString(data, 1));
		//Pub.alert('alert alert-success', 'success', data, $('#alert_msg'));
}

</script>

</head>
<body onload="init()">	
	<div align="center" class="container" style="margin-top:-10px;background: #0ddd;">
		<div id="alert_msg" class="well"></div>
		<div class="row-fluid show-grid">			
			<div id="chat_content" class="span10">
				
			</div>			
		</div>
		<input class="span4" id="msg" type="text"/>
		<input type="button" class="btn" onclick="clkSend()" value="send" />		
	</div>
</body>
</html>